<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>flexible示例文档</title>
    <link href="flexible.css" rel="stylesheet">
    <style>
        .box-row,.box-col,.box-row-rev,.box-col-rev{
            border-radius: 5px;
            background-color: #e8e8e8;
            width: 400px;
            height: 160px;


        }
        .box-row div,.box-col div,.box-row-rev div,.box-col-rev div{
            border-radius: 5px;
            border-color: #959595;
            border-width: 1px;
            box-sizing: border-box;
            border-style: solid;
            background-color: #c4c4c4;
            padding:5px;
            margin:5px;
            color: #000000

        }
        /*.xs{width: 30px;height: 30px}*/
        /*.sm{width: 50px;height: 50px}*/
        /*.md{width: 70px;height: 70px}*/
        /*.lg{width: 90px;height: 90px}*/

        .xs{padding: 30px;}
        .sm{padding: 50px;}
        .md{padding: 70px;}
        .lg{padding: 90px;}
    </style>
</head>

<h1>排列方向</h1>
<div>横向排列</div>
<div class="box-row">
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>横向反转</div>
<div class="box-row-rev">
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>竖向排列</div>
<div class="box-col">
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>竖向反转</div>
<div class="box-col-rev">
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<h1>行对齐方式</h1>
<div>行对齐方式-靠顶部对齐</div>
<div class="box-row row-top warp" >
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>行对齐方式-靠中间对齐</div>
<div class="box-row row-center warp" >
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>行对齐方式-靠底部对齐</div>
<div class="box-row row-bottom warp" >
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>行对齐方式-以两头为基准均匀分布</div>
<div class="box-row row-ends warp" >
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>行对齐方式-均匀分布</div>
<div class="box-row row-aver warp" >
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>行对齐方式-每一行高度一致</div>
<div class="box-row row-same warp" >
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<h1>水平对齐方式</h1>
<div>以头为基准靠齐</div>
<div class="box-row hor-first" style="height: 150px">
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>以最后一个为基准靠齐</div>
<div class="box-row hor-last" style="height: 150px">
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>以中间为基准靠齐</div>
<div class="box-row hor-center" style="height: 150px">
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>已两头为基准均匀分布</div>
<div class="box-row hor-ends" style="height: 150px">
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>均匀分布</div>
<div class="box-row hor-aver" style="height: 150px">
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<h1>垂直对齐方式</h1>
<div>顶部对齐</div>
<div class="box-row ver-top" style="height: 150px">
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>底部对齐</div>
<div class="box-row ver-bottom" style="height: 150px">
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>居中对齐</div>
<div class="box-row ver-center" style="height: 150px">
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>基准线对齐</div>
<div class="box-row ver-baseline" style="height: 150px">
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>强制高度相等</div>
<div class="box-row ver-same" style="height: 150px">
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>

<h1>个性对齐方式</h1>
<div class="box-row ver-top" style="height: 150px">
    <div class="change-auto">1,</div>
    <div class="xs change-baseline">2,xs</div>
    <div class="sm change-bottom">3,sm</div>
    <div class="md change-center">4,md</div>
    <div class="lg change-stretch">5,lg</div>
    <div>1,</div>
    <div class="xs change-top">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>

</div>


</body>
</html>